<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/table.css" />
  </head>
  <body>
    <div class="header">
      <div class="right">
        <div class="border-1">
          <label for="">姓名</label
          ><input
            name="addName"
            type="text"
            autocomplete="off"
            placeholder="只能包含数字字母下划线,且数字不能开头，长度在8~16之间"
          />
        </div>
        <div class="border">
          <label for="">联系电话</label
          ><input name="addCall" type="text" placeholder="Amount" />
        </div>
        <div class="border">
          <label for="">学历</label
          ><input name="addcEducation" type="text" placeholder="Amount" />
        </div>
        <div class="border">
          <label for="">年龄</label
          ><input name="addAge" type="text" placeholder="Amount" />
        </div>

        <div class="border">
          <label for="">期望薪资</label
          ><input name="addPay" type="text" placeholder="Amount" />
        </div>
        <button name="addBtn" class="baocun">保存</button>
        <button name="returnBtn" class="remove">重置</button>
      </div>
    </div>
    <div class="content">
      <table>
        <thead>
          <tr>
            <td>姓名</td>
            <td>联系电话</td>
            <td>学历</td>
            <td>年龄</td>
            <td>期望薪资</td>
            <td>删除</td>
            <td>修改</td>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>

    <div class="change">
      <div class="center">
        <div class="border-2">
          <label for="">姓名</label>
          <input name="changeName" type="text" autocomplete="off" />
        </div>
        <div class="border">
          <label for="">联系电话</label>
          <input name="changeCall" type="text" />
        </div>
        <div class="border">
          <label for="">学历</label>
          <input name="changeEducation" type="text" />
        </div>
        <div class="border">
          <label for="">年龄</label>
          <input name="changeAge" type="text" />
        </div>
        <div class="border">
          <label for="">期望薪资</label>
          <input name="changePay" type="text" />
        </div>
        <button name="changeBtn" class="baocun">修改</button>
        <button name="noneeBtn" class="remove">取消</button>
      </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>
      window.localStorage.arr = JSON.stringify([
        {
          name: "wq123456",
          call: 15642895478,
          education: "大学",
          age: 18,
          pay: 2157,
        },
        {
          name: "ad1456456",
          call: 15642895478,
          education: "初中",
          age: 20,
          pay: 2157,
        },
        {
          name: "fqw1474556",
          call: 15642895478,
          education: "大专",
          age: 21,
          pay: 2157,
        },
        {
          name: "qwdf12345",
          call: 15642895478,
          education: "大学",
          age: 18,
          pay: 2157,
        },
        {
          name: "123456",
          call: 15642895478,
          education: "保密",
          age: 15,
          pay: 2157,
        },
      ]);

      const oTbody = document.querySelector("tbody");
      const oFather = document.querySelector(".change");
      const oSon = document.querySelector(".center");
      // 获取新增
      const oAddBtn = document.querySelector('[name="addBtn"]');
      const returnBtn = document.querySelector('[name="returnBtn"]');

      const oAddIptName = document.querySelector('[name="addName"]');
      const oAddIptCall = document.querySelector('[name="addCall"]');
      const oAddIptAge = document.querySelector('[name="addAge"]');
      const oAddIptPay = document.querySelector('[name="addPay"]');
      const oAddEdu = document.querySelector('[name="addcEducation"]');

      const oBorderDiv = document.querySelector(".border-1");
      const oBorderDiv_2 = document.querySelector(".border-2");
      console.log(oBorderDiv);
      // 获取修改
      const oDiv = document.querySelector(".change");
      const oChangeBtn = document.querySelector('[name="changeBtn"]');
      const oNoneBtn = document.querySelector('[name="noneeBtn"]');
      const oChangeIptName = document.querySelector('[name="changeName"]');
      const oChangeIptCall = document.querySelector('[name="changeCall"]');
      const oChangeIptAge = document.querySelector('[name="changeAge"]');
      const oChangeIptPay = document.querySelector('[name="changePay"]');
      const oChangeEdu = document.querySelector('[name="changeEducation"]');
      var changeName = "";

      setPage();
      setTuo();
      // 删除 修改事件
      oTbody.addEventListener("click", function (event) {
        if (event.target.getAttribute("name") === "del") {
          const arr = JSON.parse(window.localStorage.arr);
          if (!window.confirm("您确定要删除吗")) {
            return;
          }

          let name = event.target.getAttribute("index");

          arr.forEach(function (item, key) {
            if (item.name === name) {
              arr.splice(key, 1);
            }
          });
          window.localStorage.arr = JSON.stringify(arr);
          setPage();
        } else if (event.target.getAttribute("name") === "change") {
          const arr = JSON.parse(window.localStorage.arr);
          oDiv.style.display = "block";
          let name = event.target.getAttribute("index");
          changeName = name;

          arr.forEach((item) => {
            if (item.name === name) {
              oChangeIptName.value = item.name;
              oChangeIptCall.value = item.call;
              oChangeIptAge.value = item.age;
              oChangeIptPay.value = item.pay;
              oChangeEdu.value = item.education;
            }
          });
        }
      });

      // 取消隐藏
      oNoneBtn.addEventListener("click", function () {
        oDiv.style.display = "none";
        setTuo();
      });

      // 点击修改
      oChangeBtn.addEventListener("click", function () {
        let name = oChangeIptName.value;
        let call = oChangeIptCall.value;
        let age = oChangeIptAge.value;
        let pay = oChangeIptPay.value;
        let education = oChangeEdu.value;
        const arr = JSON.parse(window.localStorage.arr);
        arr.forEach((item) => {
          if (item.name === changeName) {
            item.name = name;
            item.call = call;
            item.age = age;
            item.pay = pay;
            item.education = education;
          }
        });
        window.localStorage.arr = JSON.stringify(arr);
        setPage();
        oDiv.style.display = "none";
      });

      // 新增
      oAddBtn.addEventListener("click", function () {
        let name = oAddIptName.value;
        let call = oAddIptCall.value;
        let age = oAddIptAge.value;
        let pay = oAddIptPay.value;
        let education = oAddEdu.value;
        const arr = JSON.parse(window.localStorage.arr);
        arr.push({ name, call, age, pay, education });
        window.localStorage.arr = JSON.stringify(arr);
        setPage();
      });
      // 重置
      returnBtn.addEventListener("click", function () {
        oAddIptName.value = "";
        oAddIptCall.value = "";
        oAddIptAge.value = "";
        oAddIptPay.value = "";
        oAddEdu.value = "";
      });

      // 动态生成表格
      function setPage() {
        const arr = JSON.parse(window.localStorage.arr);
        console.log(arr);
        if (arr.length === 0) {
          // 如果是 空数组 生成 对应的内容
          oTbody.innerHTML = '<tr><td colspan="7">没有匹配的数据了</td></tr>';
        } else {
          // 如果不是空数组 循环遍历 数组arr 动态生成页面
          let str = "";
          arr.forEach(function (item) {
            str += `
                              <tr>
                                  <td>${item.name}</td>
                                  <td>${item.call}</td>
                                  <td>${item.education}</td>
                                  <td>${item.age}</td>
                                  <td>$ ${item.pay}</td>
                                  <td><button class="del" name="del" index="${item.name}">删除</button></td>
                                  <td><button class="rem" name="change" index="${item.name}">修改</button></td>
                              </tr>
                          `;
          });

          oTbody.innerHTML = str;
        }
      }

      // 正则验证
      function account() {
        const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[A-Za-z_][A-Za-z_0-9]{7,16}$/;
        if (reg.test(oAddIptName.value)) {
          oBorderDiv.style.borderColor = "green";
        } else {
          oBorderDiv.style.borderColor = "red";
        }
      }
      function account1() {
        const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[A-Za-z_][A-Za-z_0-9]{7,16}$/;
        if (reg.test(oChangeIptName.value)) {
          oBorderDiv_2.style.borderColor = "green";
        } else {
          oBorderDiv_2.style.borderColor = "red";
        }
      }

      oAddIptName.addEventListener("input", function () {
        account();
      });
      oChangeIptName.addEventListener("input", function () {
        account1();
      });

      // 对话框拖拽
      function setTuo() {
        oFather.addEventListener("mousemove", function fn(event) {
          let oDivLeft = oFather.offsetLeft;
          let oDivTop = oFather.offsetTop;

          let oDivBorderLeft = oFather.clientLeft;
          let oDivBorderTop = oFather.clientTop;

          let oDivWidth = oFather.clientWidth;
          let oDivHeight = oFather.clientHeight;

          let oPWidth = oSon.offsetWidth;
          let oPHeight = oSon.offsetHeight;

          let x = event.pageX - oDivLeft - oDivBorderLeft - oPWidth / 2;
          let y = event.pageY - oDivTop - oDivBorderTop - oPHeight / 2;

          x = x < 0 ? 0 : x;
          y = y < 0 ? 0 : y;

          x = x > oDivWidth - oPWidth ? oDivWidth - oPWidth : x;
          y = y > oDivHeight - oPHeight ? oDivHeight - oPHeight : y;

          oSon.style.top = y + "px";
          oSon.style.left = x + "px";
          oSon.addEventListener("click", function () {
            oFather.removeEventListener("mousemove", fn);
          });
        });
      }
    </script>
  </body>
</html>
